<template>
  <div>
    <div class="myContailer">
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="动态信息" name="first">
            <el-row class="myMarginTop_10px">
              <el-table
                v-loading="loading"
                ref="multipleTableStat"
                :data="listStat"
                :border = true
                :stripe = true
                :row-class-name="tableRowClassNameStat"
                style="width: 100%"
                @selection-change="handleSelectionChangeStat">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  prop="module_id"
                  label="模块ID"
                  >
                </el-table-column>
                <el-table-column
                  prop="module_name"
                  label="模块名"
                  >
                </el-table-column>
              </el-table>
            </el-row>
            <el-row class="myMarginTop_10px">
              <el-button type="primary" class="myBgGreen" @click="onBack">返 回</el-button>
              <el-button type="primary" class="myBgGreen" @click="onSevaStat">保 存</el-button>
            </el-row> 
          </el-tab-pane>
          <el-tab-pane label="业务处理" name="second">
            <el-row class="myMarginTop_10px">
              <el-table
                v-loading="loading"
                ref="multipleTable"
                :data="list"
                :border = true
                :stripe = true
                :row-class-name="tableRowClassName"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  prop="module_id"
                  label="模块ID"
                  >
                </el-table-column>
                <el-table-column
                  prop="module_name"
                  label="模块名"
                  >
                </el-table-column>
              </el-table>
            </el-row>
            <el-row class="myMarginTop_10px">
              <el-button type="primary" class="myBgGreen" @click="onBack">返 回</el-button>
              <el-button type="primary" class="myBgGreen" @click="onSeva">保 存</el-button>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </template>
      
    </div>
  </div>

</template>     

<style scoped>
  .myContailer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
</style>

<script>
  import { getAppPowerListFunc , getAppPowerListStat , setAppFunc , setAppStat } from '@/api/role';
  export default {
    data(){
      return{
        title:"APP权限管理",
        list:[],
        loading:false,
        id:"",
        activeName:"first",
        multipleSelection:[],
        idArr:[],
        listStat:[],
        multipleSelectionStat:[],
        idArrStat:[],
      }
    },
    components: {
        
    },
    mounted(){
      document.title = 'APP权限管理';
      this.id = this.$route.query.id;
      
      this.onGetAppPowerListStat();
    },
    methods:{
      onGetAppPowerListFunc(){//拉取app业务处理权限列表
        let vm=this;
        vm.loading=true;
        getAppPowerListFunc(vm.id).then(response => {
          let res=response.data;
          vm.list=res;

          setTimeout(function(){
            let checkList=[];
            for(let i=0; i<res.length; i++){
              if(res[i].checked){
                checkList.push(res[i])
              }
            }
            checkList.forEach(row => {
              vm.$refs.multipleTable.toggleRowSelection(row);
            });
          },150)
          
          vm.loading=false;
          // console.log(res)
        }).catch(error => {
          vm.loading=false;
          // console.log(error)
        })
      },
      onGetAppPowerListStat(){//拉取app动态信息权限列表
        let vm=this;
        vm.loading=true;
        getAppPowerListStat(vm.id).then(response => {
          let res=response.data;
          vm.listStat=res;

          setTimeout(function(){
            let checkList=[];
            for(let i=0; i<res.length; i++){
              if(res[i].checked){
                checkList.push(res[i])
              }
            }
            checkList.forEach(row => {
              vm.$refs.multipleTableStat.toggleRowSelection(row);
            });
          },150)
          
          vm.loading=false;
          // console.log(res)
        }).catch(error => {
          vm.loading=false;
          // console.log(error)
        })
      },
      handleClick(tab, event) {
        if(tab.name=="first"){
          this.onGetAppPowerListStat();
        }else{
          this.onGetAppPowerListFunc();
        }
        //console.log(tab,event);
      },
      onBack(){
        let vm=this;
        window.localStorage.setItem('pageNum',vm.$route.query.pageNum||1);
        vm.$router.go(-1);
      },
      onSeva(){//保存业务处理
        let vm=this;
        setAppFunc(vm.id,vm.idArr).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          // console.log(res)
        }).catch(error => {
          vm.$message.error("执行失败！");
          // console.log(error)
        })
      },
      onSevaStat(){//保存动态信息
        let vm=this;
        setAppStat(vm.id,vm.idArrStat).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          // console.log(res)
        }).catch(error => {
          vm.$message.error("执行失败！");
          // console.log(error)
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.idArr=[];
        if(val.length!=0){
          for(var i = 0;i<val.length;i++){
            this.idArr.push(val[i].module_id)
          }
        }else{
          this.idArr = [];
        }
      },
      tableRowClassName(row, index) {
        row.index = index
      },
      handleSelectionChangeStat(val) {
        this.multipleSelectionStat = val;
        this.idArrStat=[];
        if(val.length!=0){
          for(var i = 0;i<val.length;i++){
            this.idArrStat.push(val[i].module_id)
          }
        }else{
          this.idArrStat = [];
        }
      },
      tableRowClassNameStat(row, index) {
        row.index = index
      },
    }
  }
</script>



